<%--
    Document   : Index
    Created on : Nov 19, 2012, 19:12:27 PM
    Author     : HongDC
--%>
<%@page import="bookstore.bean.LoginBean"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
<header>
    <a href="."><div class="logo"></div></a>
    <div class="nav-bar">
        <div class="accStt">
        <% if (session.getAttribute("USER") != null) {%>
            Welcome <%=((LoginBean) session.getAttribute("USER")).getUsername()%> |
            <a href="javascript:void()" onclick="logout()">Logout</a>
        <%} else {%>
            <a href="javascript:void()" onclick="toggleDialog('#dAccount')">Register or login</a>
        <%}%>
        </div>
<!--        Account Popup-->
        <div class="dialog account row" id="dAccount">
            <div class="close" onclick="toggleDialog('#dAccount')">Close</div>
            <div class="col">
                <h3>Register</h3>
                <form id="register">
                    <table>
                        <tr>
                            <td><input name="username" type="text" required pattern="^[a-zA-Z0-9_]*$" placeholder="Username"></td>
                        </tr>
                        <tr>
                            <td><input name="email" type="email" required placeholder="Email"></td>
                        </tr>
                        <tr>
                            <td>
                                <input name="password" type="password" pattern="^([a-zA-Z0-9]{6,10})$" required placeholder="Password">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input name="action" value="Register" type="submit" class="inline">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="seperator"></div>
            <div class="col">
                <h3>Login</h3>
                <form id="login">
                    <table>
                        <tr>
                            <td><input name="username" type="text" required pattern="^[a-zA-Z0-9_]*$" placeholder="Username"></td>
                        </tr>
                        <tr>
                            <td>
                                <input name="password" type="password" required pattern="^([a-zA-Z0-9]{6,10})$" placeholder="Password">
                                <input name="action" value="Login" type="submit" class="inline">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
<!--        Checkout Popup-->
        <div class="dialog checkout row" id="dCheckout">
            <div class="close" onclick="toggleDialog('#dCheckout')">Close</div>
            <div class="col">
                <h3>Check Out</h3>
                <p class="dSummary">Total items: <span class="dTotalItems"></span> | Total price: <span class="dTotalPrice"></span></p>
                <h4>Items in Cart</h4>
                <table class="tblCheckout">
                    <thead>
                        <th>No</th><th>Title</th><th>Quantity</th><th>Unit Price</th>
                    </thead>
                    <tbody class="tblItems">
<!--                        <tr>
                            <td>1</td><td>Gone with wind</td><td>3</td><td>12.5</td>
                        </tr>-->
                    </tbody>
                </table>
                <h4>Shipping Information</h4>
                <form id="userInfo">
                    <table class="tblUserInfo">
                        <tr>
                            <th>Full Name*</th>
                            <td><input name="name" type="text" required pattern="^([a-zA-Z ]{3,50})$"></td>
                            <th>Phone*</th>
                            <td><input name="phone" type="text" required pattern="^([0-9]{7,11})$"></td>
                        </tr>
                        <tr>
                            <th>Address*</th>
                            <td><input name="address" type="text" required pattern="^([a-zA-Z ]{3,50})$"></td>
                            <th>City*</th>
                            <td>
                                <select name="city" required>
                                    <option value="">Select a City</option>
                                    <option value="HCM">Ho Chi Minh</option>
                                    <option value="HPG">Hai Phong</option>
                                    <option value="HAN">Ha Noi</option>
                                    <option value="DNG">Da Nang</option>
                                    <option value="OTH">Others</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input name="action" value="Complete" type="submit">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div class="dialog success row" id="dSuccess">
            <div class="close" onclick="toggleDialog('#dSuccess')">Close</div>
            <div class="col">
                <h3>Thank you for shopping with us.</h3>
                It normally takes 3 business days to process your order.
                This is your order number:
                <p><a href="Controller?action=download&orderId=" class="orderNumber"></a></p>
                <p>Please keep the order number for tracking. You may also want to
                download your order detail from the PDF download link.</p>

            </div>
        </div>
    </div>
    <div class="menu">
        <ul>
            <li class="active"><a href=".">Books</a></li>
            <li class="menuOrders"><a href="javascript:void()" onclick="reqOrderPage()">Orders</a></li>
        </ul>
    </div>
    <div class="tool-bar">
        <div class="line"></div>
        <div class="bar">
            <div>
                <input type="text" class="search" name="search" placeholder="Search for a title" onblur="hide()" onkeyup="search(this.value)">
                <div class="result-widget">
                    <!--                    <ul>
                                            <li><a href="" data-isbn="9780545317801"><div>
                                                <img class="coverUrl" src="http://goo.gl/83T3v">
                                                <div class="desc">
                                                    <div class="title">A Novel: The Last Man on Earth</div>
                                                    <div class="author">Vince Flynn</div>
                                                </div>
                                            </div></a></li>
                                        </ul>-->
                </div>
            </div>
            <div>
                <form id="orderCheck" method="GET" action="OrderController">
                   <input id="orderId" class="orderId" type="text" name="orderId" placeholder="Check order by ID">
                   <input type="hidden" name="action" value="View">
                </form>
            </div>
            <div>Pay with Paypal and get 5% Back and $25 Gift Card Offer</div>
        </div>
        <div class="cart-header" id="cart-header">
            <form id="formCart">
                <span class="cart-title">Shopping Cart</span>
                <span class="cart-items">0</span>
                <span class="cart-total">$132.42</span>
                <span class="cart-title">
                    <input id="btnCheckOut" type="button" value="Checkout" onclick="checkOut()">                    
                </span>
            </form>
        </div>
        <div class="cart">
            <!-- <div>
					<img src="http://goo.gl/sGXLO" alt="">
					<div class="desc">
						<div class="title">A Novel: The Last Man on Earth</div>
						<div class="author">Vince Flynn</div>
						<div class="calc">
							<span>21.42 x</span><input type="number" min="1" max="5" data-isbn="9781416595212" step="1" value="1" onchange="setQuantity(this.dataset.isbn, this.value)"><input type="button" onclick="alert(9781416595212)" value="X"> </div>
					</div>
				</div>
            -->
        </div>
    </div>
</header>